{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ docname }}</title>

    <style>
table {
    width: 100%; /*表格宽度*/

    border: 1px solid #dedede; /*表格外边框设置*/
    /*margin: 15px auto;*/ /*外边距*/
    border-collapse: collapse; /*使用单一线条的边框*/
    empty-cells: show; /*单元格无内容依旧绘制边框*/
}
table th,
table td {
  height: 35px; /*统一每一行的默认高度*/
  border: 1px solid #dedede; /*内部边框样式*/
  padding: 0 10px; /*内边距*/
}
table th {
    font-weight: bold; /*加粗*/
    /*text-align: center !important;*/ /*内容居中，加上 !important 避免被 Markdown 样式覆盖*/
    background: rgba(158,188,226,0.2); /*背景色*/
}

table tbody tr:nth-child(2n) {
    background: rgba(158,188,226,0.12);
}
table tr:hover {
    background: #efefef;
}
table th {
    white-space: nowrap; /*表头内容强制在一行显示*/
}
table td:nth-child(1) {
    white-space: nowrap;
}

.table-area {
    overflow: auto;
}
    </style>
</head>
<body>
{{ content | safe }}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="{% static 'Dashboard/assets/js/vendor/jquery-slim.min.js' %}"><\/script>')</script>
<script>
    [].slice.call(document.querySelectorAll('table')).forEach(function(el){
    var wrapper = document.createElement('div');
    wrapper.className = 'table-area';
    el.parentNode.insertBefore(wrapper, el);
    el.parentNode.removeChild(el);
    wrapper.appendChild(el);
})
    $("table").wrap("<div class='table-area'></div>");
</script>
</body>
</html>